<template>
        <div id="qxManager_assignment" class="container-fluid padding">
            <el-form :model="searchDatas" ref="searchDatas" :inline="true" class="padding" label-width="100px">
                <el-form-item label="用户名称" prop="username">
                    <el-input v-model="searchDatas.username"  style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="员工工号" prop="yggh">
                    <el-input v-model="searchDatas.yggh"  style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="坐席号码" prop="zxhm">
                    <el-input v-model="searchDatas.zxhm"  style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="searchDatas.email"  style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="员工名称" prop="ygmc">
                    <el-input v-model="searchDatas.ygmc"  style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="search()">查询</el-button>
                    <el-button type="warning" @click="$refs['searchDatas'].resetFields()">重置</el-button>
                </el-form-item>
            </el-form>
            <table class="layui-hide" id="qxAssignmentTable"  lay-filter="qxAssignmentTable"></table>
            <script type="text/html" id="roleToolbar">
              <div class="layui-btn-container">
                <button class="el-button el-button--success el-button--mini is-round" lay-event="add">新增用户</button>
                <button class="el-button el-button--primary el-button--mini is-round" lay-event="refresh">刷新列表</button>
              </div>
            </script>
            <!--v-pre表示这个代码不需要让vue解析掉-->
            <script type="text/html" id="roleBar" v-pre>
              <button class="el-button el-button--primary el-button--mini is-round" lay-event="edit">编辑</button>
              <button class="el-button el-button--danger el-button--mini is-round" lay-event="del">删除</button>
            </script>
            <!--隐藏项-->
            <div id="add" style="display: none">
                <el-form :model="saveDatas" :rules="rules" ref="saveDatas" label-width="100px" class="padding">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="saveDatas.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="saveDatas.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="验证邮箱" prop="email">
                        <el-input v-model="saveDatas.email"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('saveDatas')">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
</template>

<script>
    export default {
        name: "assignment",
        data() {
            return {
                props: {//分类树的内容
                    value: 'label',
                    label: 'label',
                    children: 'children'
                },
                table_head:[
                    {field: 'username',  title: '用户名', sort: true}
                    ,{field: 'yggh',  title: '员工工号', sort: true}
                    ,{field: 'ygmc',  title: '员工名称', sort: true}
                    ,{field: 'zxhm',  title: '坐席号码', sort: true}
                    ,{field: 'email',  title: '邮箱', sort: true}
                    ,{fixed: 'right',width: 320,align:'center',templet: '#roleBar'}
                ],
                datas:{
                    name:"",
                    className:"",
                },//编辑的数据字段
                index:"",
                totalCount:"",
                ruleNameOption:{},
                tree: [],//职位分类树
                saveDatas:{
                    email:"",
                    username:"",
                    yggh:"",
                    zuoxi:"",
                    password:""
                },
                rules: {
                    username: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    password: [
                        { required: true,min:6, message: '请输入密码，长度至少为6位', trigger: 'blur' },
                    ],
                    email: [
                        { type: 'email',required: true,message: '请输入邮箱，邮箱格式为xx@xx.com', trigger: 'blur' },
                    ],
                },
                searchDatas:{
                    username:"",
                    yggh:"",
                    zxhm:"",
                    email:"",
                    ygmc:"",
                }
            }
        },
        created:function(){
            this.$nextTick(function () {
                layui.use('table', ()=>{//加这个是防止刷新的时候会出现不存在render方法
                    this.$message_.layTable(this,'qx-assignment/list','#qxAssignmentTable',{},this.table_head,600,'#roleToolbar',true);
                    //头工具栏事件
                    layui.table.on('toolbar(qxAssignmentTable)', (obj)=>{
                        switch(obj.event){
                            case 'add'://新增用户
                                allType = "add";
                                this.$refs['saveDatas'].resetFields();
                                this.alertAddUser();
                                break;
                            case "refresh":
                                noCheckCache = true;
                                this.$message_.layTable(this,'qx-assignment/list','#qxAssignmentTable',{},this.table_head,600,'#roleToolbar',true);
                                break;
                        };
                    });
                    //监听行工具事件
                    layui.table.on('tool(qxAssignmentTable)', (obj)=>{
                        allId = obj.data.id;
                        switch (obj.event) {
                            case "del":
                                allType = "del";
                                layer.confirm('真的删除该行么', (index) => {
                                    this.$message_.postTips(this,'删除','qx-assignment/delete?id='+allId,{},null,()=>{obj.del();})
                                    layer.close(index);
                                });
                                break;
                            case "edit":
                                allType = "edit";
                                this.$refs['saveDatas'].resetFields();
                                this.alertAddUser();
                                this.saveDatas = obj.data;
                                break;
                        }
                    });
                });
            });
        },
        methods: {
            alertAddUser: function (obj=null) {
                this.$message_.postTips(this,'','qx-assignment/get-tree',{},null,(res)=>{
                    this.tree=res.data.data;
                })
                allIndex = this.$message_.layOpen("#add");
            },
            submitForm:function(saveDatas) {
                this.$refs[saveDatas].validate((valid) => {
                    if (valid) {
                        switch (allType){
                            case "add":
                                this.$message_.postTips(this,'新增用户','site/front-signup',{SignupForm:this.saveDatas});
                                break;
                            case "edit":
                                this.$message_.postTips(this,'修改用户','site/save',{user:this.saveDatas});
                                break;
                        }
                        return false;
                    } else {
                        return false;
                    }
                });
            },
            search:function(){
                noCheckCache = true
                this.$message_.layTable(this,'qx-assignment/list','#qxAssignmentTable',{AssignmentSearch:this.searchDatas},this.table_head,600,'#roleToolbar',true);
            },
        }
    }
</script>